<template>
  <div id="list" style="padding-bottom: 20px;">
    <van-sticky>
      <van-search
        v-model="search.plan_title"
        placeholder="搜索评价计划名称"
        @input="change"
      />
      <van-dropdown-menu>
        <van-dropdown-item v-model="search.is_finish" :options="option1" @change="change" />
        <van-dropdown-item v-model="search.status" :options="option2" @change="change" />
      </van-dropdown-menu>
    </van-sticky>
    <van-list
      v-if="dataList.length!==0"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group v-for="(item, index) in dataList" :key="index" inset :class="{finished:item.is_finish==1,unfinish:item.is_finish!==1}">
        <van-cell title="" style="padding-bottom: 0;">
          <template #right-icon>
            <van-tag v-if="item.status==0" type="danger" color="#cfcfcf" class="indexTag">
              已结束
            </van-tag>
            <van-tag v-if="item.status==2" type="danger" class="indexTag">
              待开始
            </van-tag>
            <van-tag v-if="item.status==3" type="success" class="indexTag">
              进行中
            </van-tag>
          </template>
        </van-cell>
        <div class="van-cell" style="padding:0px 20px 3px 20vw;display: flow-root;">
          <div class="van-cell__label plan_title">
            {{ item.plan_title }}
          </div>
          <div class="van-cell__label">
            {{ item.end_time?" 结束时间："+item.end_time:"长期有效" }}
          </div>
        </div>
        <div role="button" tabindex="0" class="van-cell van-cell--clickable" style="border-top: 1px #eeeeee solid;
    margin-top: 15px;" @click="toPlan(item)"
        >
          <div class="van-cell__value linkColor">
            <span>{{ item.is_finish!==1?'去评价':'查看评价' }}</span>
          </div><i class="van-icon van-icon-arrow van-cell__right-icon" />
        </div>
      </van-cell-group>
    </van-list>
    <van-empty v-if="dataList.length==0&&!loading" description="暂无数据" />
  </div>
</template>
<script>
import { Row, Col, Icon, Cell, CellGroup, DropdownMenu, DropdownItem, Tag, Toast, Sticky, Empty, Dialog, Search,List} from 'vant';
import wechat from '../../util/wechat';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [CellGroup.name]: CellGroup,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Toast.name]: Toast,
    [Sticky.name]: Sticky,
    [Empty.name]: Empty,
    [Search.name]: Search,
    [List.name]: List,
    [Dialog.name]: Dialog,

  },
  data() {
    return {
      loading: false,
      finished: false,
      option1: [
        { text: '完成状态', value: '' },
        { text: '未完成', value: '0' },
        { text: '已完成', value: '1' },
      ],
      option2: [
        { text: '计划状态', value: '' },
        { text: '发布中', value: '3' },
        { text: '已停止', value: '0' },
      ],
      search: {
        "plan_title": "",
        "eval_from_to": "",
        "begin_time": "",
        "end_time": "",
        "status": "",
        "pageNo": 1,
        "pageSize": 10,
        "class_ids": "",
        "login_user_id": '',
        "is_finish": ""
      },
      dataList: []
    };
  }, mounted() {
    this.search.login_user_id=JSON.parse(sessionStorage.baseUser).orguser.user_id
    //获取微信权限
    wechat();
    //弹窗确定颜色
    Dialog.setDefaultOptions({
      confirmButtonColor: "#6e6ef1"
    })
    this.list();
  }, methods: {
    change(value) {
      this.dataList=[]
      this.search.pageNo = 1
      this.list()
    },
    onLoad(){
      setTimeout(() => {
        if (this.loading) {
          return false;
        }
        this.search.pageNo += 1;
        this.list();
      }, 100);
    },
    // 获取计划列表
    async list() {
      this.loading=true
      // const toast = Toast.loading({ duration: 0 })
      const res = await this.$api.list.list.get(this.search);
      // toast.clear();
      if (res.code === 200) {
        this.loading=false
        if(res.data.data.length <10){
          this.finished=true
        }
        this.dataList=[...this.dataList,...res.data.data]
      } else {
        this.loading=false
        Dialog.alert({
          message: res.message,
        });
      }
    },
    toPlan(row) {
      localStorage.removeItem('tempData')
      this.$router.push({
        name: "tPlan",
        query: {
          planId:row.id
        },
      });
    }
  }
};
</script>
<style lang="less" scoped>
  ::v-deep .van-cell-group--inset {
    margin: 15px 8px 0;
    padding-top: 1vw;
  }

  ::v-deep .van-cell {
    justify-content: space-between;
  }

  ::v-deep .van-cell__title {
    // font-weight: bold;
    font-size: 14px;
  }

  ::v-deep .van-dropdown-menu__title--active {
    color: #6e6ef1;
  }

  ::v-deep .van-dropdown-item__option--active {
    color: #6e6ef1;
  }

  ::v-deep .van-dropdown-item__option--active .van-dropdown-item__icon {
    color: #6e6ef1;
  }

  ::v-deep .van-cell::after {
    border-bottom: none;
    width: 100%;
    left: 0;
  }

  ::v-deep .indexTag {
    border-radius: 30px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
  }

  ::v-deep .van-cell__label {
    font-size: 14px;
  }

  ::v-deep .van-tag--success {
    background-color: #86c149;
  }

  ::v-deep .van-dialog__confirm,
  .van-dialog__confirm:active {
    color: #06c09b;
  }

  ::v-deep div,
  .van-cell {
    word-break: break-all;
  }
  ::v-deep .van-dropdown-menu__bar {
    box-shadow: 0px 6px 12px rgba(100,101,102,.12);
  }
  .finished {
    background: url(../../assets/img/finished.png);
    background-repeat: no-repeat;
    background-size: 20vw;
    background-color: #fff;
  }
  .unfinish{
    background: url(../../assets/img/unfinished.png);
    background-repeat: no-repeat;
    background-size: 20vw;
    background-color: #fff;
  }
  ::v-deep .van-cell {background: none;}
  .plan_title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 17px;
  }
  .linkColor,.van-cell__right-icon{
    color: dodgerblue;
  }
</style>